<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 String//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>
      Interface Testing
    </title>
    <link rel="stylesheet" type="text/css" href="/omwpt/media/css/site.css" media="screen" />
    <link href="/omwpt/media/css/default.css" rel="stylesheet" type="text/css" />

    <!-- Script for slider bar -->
    <script src="/omwpt/scripts/slider2.js" type="text/javascript">
    </script>
    <script src="/omwpt/scripts/slider.js" type="text/javascript">
    </script>
    <script 
        src="http://maps.google.com/jsapi?ie=utf-8&amp;oe=utf-8&amp;key=ABQIAAAAnfs7bKE82qgb3Zc2YyS-oBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSySz_REpPq-4WZA27OwgbtyR3VcA"
        type="text/javascript">

    </script>

    <script type="text/javascript">
      google.load("maps", "2.x", {"language" : "en"});
      var map;
      var points = new Array(); //Array of LatLng objects
      var coordinates = new Array();

      var geocoder;
      var circle;
      var circleRadius = 100;
      var centerMarker;

      function generateMap()
      {
        if (GBrowserIsCompatible())
        {

          map = new GMap2(document.getElementById("map"));
          map.addControl(new google.maps.LargeMapControl());
          map.addControl(new GScaleControl());
          map.addMapType(G_PHYSICAL_MAP);
          map.addControl(new google.maps.MapTypeControl());
          map.setCenter(new google.maps.LatLng(35.913679, -79.055927), 13, G_NORMAL_MAP);
          map.enableScrollWheelZoom();

          GEvent.addListener(map, "click", function(overlay, point){ addPoint(overlay, point); });

        }
      }

      function addPoint(overlay, point)
      {
        if (point)
        {
          points[ points.length ] = point;
          coordinates[ coordinates.length ] = [ point.lat(), point.lng() ];
          redrawPath();
        }
      }
      
      function updateDirText(value)
      {
      	document.getElementById('dirValue').value = value;
      }
      
      function updateDirSlider(value)
      {
      	document.getElementById('dirSlider').value = value;
      }
    </script>

  </head>

  <body onload="initialize()" onunload="GUnload()">
    <h1>
      Wireless Planning Tool
    </h1>

    <p>
      You can use your scroll wheel to zoom in and out of the map.
    </p>

    <table summary="A table">
      <tr>
        <td>
          <div id="map" style="width: 600px; height: 400px">
          </div>
        </td>
        <td valign="top">
          <h3>
            Features
          </h3>
          <br>
          <form name="frmAction">
            <input type="radio" class="radio" name="optSelect" value="elev">
            Get Elevation Info
            <br>
            <input type="radio" class="radio" name="optSelect" value="icon">


            Place Icon
           
          </form>
          
          <br>
          <div id="Direction">
          <input _type="slider" id="dirSlider" minimum="-179" maximum="180" onslide="updateDirText(value)" value="23"/>
          <input type="text" id="dirValue" value="0" onchange="updateDirSlider(value)"/>
          </div>
          <br>

          <br/>
          <div id="result2">

          </div>
        </td>
      </tr>
    </table>

  </body>

</html>
